<template>
	<view class="base-img">
		<image :src='src' @load='loadImg' :class="[imgLoaded ? 'imgAnt':'']" mode="aspectFill" @error="imgError()" lazy-load="true"></image>
		<view class="loading-bg" v-if='!imgLoaded'></view>
	</view>
</template>

<script>
	export default {
		name:"base-img",
		props:{
			src:{
				type:String,
				default:'https://supercs.oss-cn-beijing.aliyuncs.com/manghe/f616e69cc1cca29e3ec8d7115359b82ae0b8c9bf.jpg'
			}
		},
		data() {
			return {
				imgLoaded:false,
			};
		},
		methods:{
			loadImg(e){
				if(e){
					this.imgLoaded = true;
				}
			},
			imgError(){
				this.src= '/static/loadfail.png';
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.base-img{
		width:100%;
		height: 100%;
		position: relative;
		image{
			width: 100%;
			height: 100%;
			opacity: 0.2;
			position: relative;
			z-index: 2;
		}
	}
	.imgAnt{
		opacity: 1 !important;
		transition-duration: 1s;
		transition-property: opacity;
	}
	.loading-bg{
		width:100%;
		height: 100%;
		position: absolute;
		left:0;
		top:0;
		z-index:1;
		background:$dis-bg-color;
	}
</style>